<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染1</title>
    <script src="../commonjs/vue.js"></script>
    <style>
        .basic{
            width: 200px;
            height: 100px;
            border: solid 2px black;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="basic" v-show="showDesc">v-show条件渲染</div>
    <button @click="showHandler">显示/隐藏</button>
    <br><br><br><br><br>
    <div class="basic" v-if="ifDesc">v-if条件渲染</div>
    <button @click="ifHandler">显示/隐藏</button>
    <br><br>
    <!--v-if高级用法-->
    <div v-if="num === 1">Angular</div>
    <div v-else-if="num === 2">Vue</div>
    <div v-else-if="num === 3">React</div>
    <div v-else>Hello</div>
    <!--template:不影响结构的情况下控制多个元素的显示隐藏,但是只能使用v-if-->
    <template v-if="n === 1">
        <h2>Hello</h2>
        <h2>你好</h2>
        <h2>Hi</h2>
    </template>
    <button @click="n+=1">n+1</button>
</div>
<script>
    Vue.config.productionTip = false;//关闭开发提示
    new Vue({
        el:'#root',
        data:{
            showDesc:true,
            ifDesc:true,
            num:1,
            n:0
        },
        methods:{
            showHandler(){
                this.showDesc = !this.showDesc
            },
            ifHandler(){
                this.ifDesc = !this.ifDesc
            }
        }
    })
</script>
</body>
</html>